<template>
  <div>
    <a-form-model layout="vertical" ref="commentAreaForm" :model="form" :rules="validatorRules">
      <a-comment id="comment-area">
        <a-avatar slot="avatar" :src="require('@/assets/img/logo.png')" alt="CRM" />
        <div slot="content">
          <div class="textarea-content">
            <a-form-model-item >
              <a-textarea placeholder="请输入跟进内容" id="my-textarea" :rows="4" v-model.trim="form.content" style="padding-bottom: 0;margin-bottom: 0"/>
            </a-form-model-item>
            <div class="business-list" v-if="businessDataSource.length>0">
              <p class="title"><a-icon type="block"/>关联商机</p>
              <div class="list-content">
                <div class="item" v-for="(item,index) in businessDataSource" :key="index">
                  <span>{{item.businessName}}</span>
                  <span class="close" title="删除" @click="deleteItem('business',index)">x</span>
                </div>
              </div>
            </div>
            <div class="contacts-list" v-if="contractsDataSource.length>0">
              <p class="title"><a-icon type="user"/>关联联系人</p>
              <div class="list-content">
                <div class="item" v-for="(item,index) in contractsDataSource" :key="index">
                  <span>{{item.name}}</span>
                  <span class="close" title="删除" @click="deleteItem('contracts',index)">x</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a-row class="comment-row">
          <a-col style="width: 81px">
            <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" list-type="text"  :headers="headers" class="upload-list-inline">
              <a-button> <a-icon type="file-add" />附件</a-button>
            </a-upload>
          </a-col>
          <a-col v-if="category === 'crm_customer' || category === 'crm_product'">
            <a-button @click="linkBusiness"> <a-icon type="block" />关联商机</a-button>
          </a-col>
          <a-col v-if="category === 'crm_customer' || category === 'crm_product'">
              <a-button @click="linkContacts"> <a-icon type="user" />关联联系人</a-button>
          </a-col>
          <a-col>
            <a-form-item style="width: 180px">
              <z-dict-select-tag placeholder="请选择记录类型" v-model="form.types" dictCode="followup_type"/>
            </a-form-item>
          </a-col>
          <a-col>
            <a-form-item>
              <a-date-picker placeholder="请选择下次联系时间" v-model="form.nextTime" style="width: 100%" show-time format="YYYY-MM-DD HH:mm:ss"></a-date-picker>
            </a-form-item>
          </a-col>
        </a-row>
      </a-comment>
    </a-form-model>
  </div>
</template>

<script>
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import { httpAction} from '@/services/manage'
import { Upload as AUpload,Avatar as AAvatar,Comment as AComment } from 'ant-design-vue'

export default {
  name:"CommentArea",
  components: {
    ZDictSelectTag,
    AUpload,
    AAvatar,
    AComment
  },
  props: {
    record:{},
    category:"",
    parentMsgId: "",
    replyMsgUsername: "",
  },
  data() {
    return{
      form: {},
      fileList:[],
      businessDataSource:[],
      contractsDataSource:[],
      businessIds:"",
      contactsIds:"",
      headers:{
        authorization: 'authorization-text',
      },
      validatorRules: {
        content: [
          { required: true, message: '请输入跟进内容!' }
        ],
        types: [
          { required: true, message: '请选择记录类型!' }
        ],
      },

    }
  },
  watch: {
    replyMsgUsername() {
      document
        .querySelector("#my-textarea")
        .setAttribute("placeholder", "回复: " + "@" + this.replyMsgUsername);
    }
  },
  created() {
    // const token = Vue.ls.get(ACCESS_TOKEN);
    // this.headers['X-Access-Token'] = token
  },
  methods: {
    deleteItem(type,index){
      this[type+'DataSource'].splice(index,1);
      this[type+'Ids'] = this[type+'DataSource'].map(item=>item.id).join(',');
      console.log(`当前${type}Ids--`+this[type+'Ids']);
    },
    //关联商机
    linkBusiness() {
      //this.$refs['FollowupBusiness'].open(this.record.id,this.businessDataSource);
    },
    //关联联系人
    linkContacts() {
      //this.$refs['FollowupContacts'].open(this.record.id,this.contractsDataSource);
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    handleSubmit(category,typesId,url) {
      const that = this;
      this.$refs.commentAreaForm.validate(valid => {
        if (valid) {
            let formData = Object.assign({}, that.form)
            let nextTime = formData.nextTime == undefined ? '' : formData.nextTime.format('YYYY-MM-DD HH:mm:ss');
          
            formData.nextTime = nextTime
            formData.typesId = typesId
            formData.category = category
            console.log('handleSubmit', formData)
            httpAction(url,formData,'post').then((res)=>{
              if(res.success){
                that.$refs.commentAreaForm.resetFields();
                that.businessIds = "";
                that.contactsIds = "";
                that.businessDataSource = [];
                that.contractsDataSource = [];
                that.$message.success(res.message);
                that.$emit('reload');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.$emit('followupOK');
            })
        } else {
            that.$emit('followupOK');
        }
      });
    },
  }
}
</script>
<style lang="less">
  .comment-row{
    &>.ant-col{
      display: inline-block;
      margin-right: 10px;
      vertical-align: top;
      .ant-upload-list-item{
        width: fit-content;
        &>.ant-upload-list-item-info{
          padding-right: 25px;
        }
      }
    }
  }
  .textarea-content{
    border: 1px solid #d9d9d9;
    padding: 10px 7px;
    border-radius: 5px;
    margin-bottom: 10px;
    textarea{
      border: none;
      resize: none;
      outline: none;
      box-shadow: none!important;
      :focus{
        box-shadow: none!important;
      }
    }
    .business-list,.contacts-list{
      padding: 0 10px;
      margin: 10px 10px 0px;
      border: 1px dashed #dfdfdf;
      .title{
        padding: 7px 0 10px;
        margin: 0;
      }
      .list-content{
        .item{
          display: inline-block;
          height: 24px;
          border-radius: 12px;
          padding: 0 8px;
          margin: 0 5px 5px 0;
          background-color: #3487e2;
          color: #fff;
          width: auto;
          .close{
            margin-left: 8px;
            font-weight: 600;
            cursor: pointer;
            &:hover{
              transform: scale(1.2);
            }
          }
        }
      }
    }
  }
</style>